<template>
    <div style="background-color:#f0f0f0;">
      <div class="tableBox">
        <table style="width: 100%;"  border="0" cellspacing="0" cellpadding="0">
         <tbody>
         <tr>
           <td class="rowImg titleItem">对比房源</td>
           <td class="rowImg">
             <img src="../../../static/contrast/timg01.jpg" width="100%"  alt="">
             <div style="margin-left: 50px;">
               <h3>银月湾新地3室2厅1台</h3>
               <h3 style="color: #fbb355;">$2,380万</h3>
               <p>
                 <span class="Label" style="color: #ddc181;">豪华装修</span>
                 <span class="Label" style="color: #ca908d;">豪华装修</span>
                 <span class="Label" style="color: #98b0cc;">豪华装修</span>

               </p>
             </div>
           </td>
           <td class="rowImg">
              <img src="../../../static/contrast/timg01.jpg" width="100%"  alt="">
             <div style="margin-left: 30px;">
               <h3>银月湾新地3室2厅1台</h3>
               <h3 style="color: #fbb355;">$2,380万</h3>
               <p>
                 <span class="Label" style="color: #ddc181;">豪华装修</span>
                 <span class="Label" style="color: #ca908d;">豪华装修</span>
                 <span class="Label" style="color: #98b0cc;">豪华装修</span>

               </p>
             </div>
           </td>
           <td class="rowImg">
              <img src="../../../static/contrast/timg01.jpg" width="100%"  alt="">
             <div style="margin-left: 30px;">
               <h3>银月湾新地3室2厅1台</h3>
               <h3 style="color: #fbb355;">$2,380万</h3>
               <p>
                 <span class="Label" style="color: #ddc181;">豪华装修</span>
                 <span class="Label" style="color: #ca908d;">豪华装修</span>
                 <span class="Label" style="color: #98b0cc;">豪华装修</span>

               </p>
             </div>
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">楼宇名称</td>
           <td class="rowImg  rowTxt">
             银月湾
           </td>
           <td class="rowImg rowTxt">
             银月湾
           </td>
           <td class="rowImg rowTxt">
             银月湾
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">区域</td>
           <td class="rowImg  rowTxt">
             九龙港
           </td>
           <td class="rowImg rowTxt">
             九龙港
           </td>
           <td class="rowImg rowTxt">
             九龙港
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">售卖</td>
           <td class="rowImg  rowTxt">
             $ 2,380万
           </td>
           <td class="rowImg rowTxt">
             $ 2,380万
           </td>
           <td class="rowImg rowTxt">
             $ 2,380万
           </td>
         </tr>

         <tr>
           <td class="rowImg titleItem rowTxt">建筑面积</td>
           <td class="rowImg  rowTxt">
             120平方尺
           </td>
           <td class="rowImg rowTxt">
             120平方尺
           </td>
           <td class="rowImg rowTxt">
             120平方尺
           </td>
         </tr>

         <tr>
           <td class="rowImg titleItem rowTxt">建筑面积/尺</td>
           <td class="rowImg  rowTxt">
             $328/平方尺
           </td>
           <td class="rowImg rowTxt">
             $328/平方尺
           </td>
           <td class="rowImg rowTxt">
             $328/平方尺
           </td>
         </tr>

         <tr>
           <td class="rowImg titleItem rowTxt">实用面积</td>
           <td class="rowImg  rowTxt">
             120平方尺
           </td>
           <td class="rowImg rowTxt">
             120平方尺
           </td>
           <td class="rowImg rowTxt">
             120平方尺
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">实用面积/尺</td>
           <td class="rowImg  rowTxt">
             $328/平方尺
           </td>
           <td class="rowImg rowTxt">
             $328/平方尺
           </td>
           <td class="rowImg rowTxt">
             $328/平方尺
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">房间</td>
           <td class="rowImg  rowTxt">
           3
           </td>
           <td class="rowImg rowTxt">
             3
           </td>
           <td class="rowImg rowTxt">
             3
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">楼层</td>
           <td class="rowImg  rowTxt">
             高层/31层

           </td>
           <td class="rowImg rowTxt">
             高层/31层

           </td>
           <td class="rowImg rowTxt">
             高层/31层
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">朝向</td>
           <td class="rowImg  rowTxt">
             东南
           </td>
           <td class="rowImg rowTxt">
             东南
           </td>
           <td class="rowImg rowTxt">
             东南
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem rowTxt">楼龄</td>
           <td class="rowImg  rowTxt">
             2013年
           </td>
           <td class="rowImg rowTxt">
             2013年
           </td>
           <td class="rowImg rowTxt">
             2013年
           </td>
         </tr> <tr>
           <td class="rowImg titleItem rowTxt">装修情况</td>
           <td class="rowImg  rowTxt">
             精装
           </td>
           <td class="rowImg rowTxt">
             精装
           </td>
           <td class="rowImg rowTxt">
             精装
           </td>
         </tr> <tr>
           <td class="rowImg titleItem rowTxt">房屋类型</td>
           <td class="rowImg  rowTxt">
             别墅
           </td>
           <td class="rowImg rowTxt">
             别墅
           </td>
           <td class="rowImg rowTxt">
             别墅
           </td>
         </tr>
         <tr>
           <td class="rowImg titleItem">对比房源</td>
           <td class="rowImg lastTr">
           <div style="width: 250px;height: 250px;margin: 0 auto">
             <img src="../../../static/contrast/timg02.jpg" width="250px" height="250"  alt="">
           </div>

             <div style="text-align: center">
               <h3>陈超远</h3>
               <el-rate v-model="value2" :colors="colors"></el-rate>
               <h3 style="color: #b3b3b3;font-size: 12px;">中介名或业主</h3>
               <h2 style="color: #e10d0d;"><i class="el-icon-phone-outline"></i>96787708</h2>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-s-comment"></i>在线咨询</el-button><br/>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-phone"></i>WhatsAPP</el-button><br/>
             </div>
           </td>
           <td class="rowImg lastTr">
             <div style="width: 250px;height: 250px;margin: 0 auto">
               <img src="../../../static/contrast/timg02.jpg" width="250px" height="250"  alt="">
             </div>

             <div style="text-align: center">
               <h3>陈超远</h3>
               <el-rate v-model="value2" :colors="colors"></el-rate>
               <h3 style="color: #b3b3b3;font-size: 12px;">中介名或业主</h3>
               <h2 style="color: #e10d0d;"><i class="el-icon-phone-outline"></i>96787708</h2>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-s-comment"></i>在线咨询</el-button><br/>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-phone"></i>WhatsAPP</el-button><br/>
             </div>
           </td>
           <td class="rowImg lastTr">
             <div style="width: 250px;height: 250px;margin: 0 auto">
               <img src="../../../static/contrast/timg02.jpg" width="250px" height="250"  alt="">
             </div>

             <div style="text-align: center">
               <h3>陈超远</h3>
               <el-rate v-model="value2" :colors="colors"></el-rate>
               <h3 style="color: #b3b3b3;font-size: 12px;">中介名或业主</h3>
               <h2 style="color: #e10d0d;"><i class="el-icon-phone-outline"></i>96787708</h2>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-s-comment"></i>在线咨询</el-button><br/>
               <el-button style="color: #e10d0d;font-weight: bold;border: 2px solid #e10d0d;width: 150px;margin-top: 15px">
                 <i class="el-icon-phone"></i>WhatsAPP</el-button><br/>
             </div>
           </td>
         </tr>

         </tbody>
        </table>
      </div>
    </div>
</template>

<script>
    export default {
        name: "contrast",
      data() {
        return {}
      }
    }
</script>

<style scoped>
.tableBox{
  width: 1200px;
  height: 1700px;
  /*border: 1px solid #000;*/
  margin: 0 auto;
  background-color: #fff;
}
  .rowImg{
    width: 200px;
    border: 1px solid #ccc;
    height: 350px;
    /*box-sizing:content-box;*/
    text-align: left;
    line-height: 30px;

  }
  .titleItem{
    text-align: center;
    font-weight: bold;
    width: 100px;
    background-color:#fafafa;
  }
  .Label{
    padding: 5px;
    font-size: 12px;
    background-color: #f1e9dc;
    border-radius: 5px;
  }
  .rowTxt{
    height: 60px !important;
    text-align: center;
    font-weight: bold;
  }
  .lastTr{
    height: 500px;
  }
</style>
